<template>
    <div class="container">
        <van-tabs :ellipsis="false" :sticky="true" v-model="tab" @change="handleTabChange">
            <van-tab title="全部" name="all"/>
            <van-tab title="待付款" name="waitPay"/>
            <van-tab title="待发货" name="waitSend"/>
            <van-tab title="待收货" name="waitConfirm"/>
            <van-tab title="待评价" name="waitRate"/>
        </van-tabs>
        <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
            <div class="order-list" v-if="orderList.length>0">
                <div class="order-wrapper" v-for="(order,index) in orderList" :key="index">
                    <div class="order-head">
                        <div class="flex">单号:{{order.order_no}}</div>
                        <div style="color: #ff6034;">{{order.buyer_state_des}}</div>
                    </div>
                    <a :href="'/h5/order/detail?order_id='+order.order_id">
                        <div class="order-items">
                            <div class="item" v-for="(item,index) in order.items" :key="index">
                                <div class="pic-box">
                                    <img :src="item.thumb" class="pic" alt="">
                                </div>
                                <div class="item-center">
                                    <div class="title">{{item.title}}</div>
                                    <div class="sku-title" v-if="item.sku_title">{{item.sku_title}}</div>
                                </div>
                                <div class="item-right">
                                    <p>￥{{item.price}}</p>
                                    <i>x{{item.quantity}}</i>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="order-row">
                        总价￥{{order.total_fee}}，优惠￥{{order.discount_fee}}，实付款￥{{order.total_fee}}
                    </div>
                    <order-edit-bar
                            :order="order"
                            @cancel="onCancel"
                            @pay="onPay(order)"
                            @delete="onDelete(index)"
                            @confirm="onConfirm"
                    ></order-edit-bar>
                </div>
            </div>
            <div class="no-order" v-else>
                <span class="iconfont icon-form_light"></span>
                <p>没有订单信息</p>
            </div>
        </van-pull-refresh>
        <CancelOrder :show.sync="showCancel" :order="order" @didCancel="didCancel"></CancelOrder>
    </div>
</template>

<script>
    import OrderEditBar from "../common/OrderEditBar";
    import CancelOrder from "./CancelOrder";
    import {bindLoadMore} from "../lib/loadmore";

    export default {
        name: "OrderList",
        components: {
            OrderEditBar,
            CancelOrder
        },
        data: function () {
            return {
                orderList: [],
                tab: _data.tab,
                order: {},
                showCancel: false,
                offset: 0,
                isLoading: true,
                isRefreshing: false,
                isLoadMore: false,
                loadMoreAble: false
            }
        },
        mounted() {
            this.fetchList();
            bindLoadMore(this.onLoadMore);
        },
        methods: {
            fetchList() {
                this.$get('/webapi/bought/batchget', {
                    tab: this.tab,
                    offset: this.offset
                }).then(response => {
                    //console.log(response.data);
                    if (this.isLoadMore) {
                        this.orderList = this.orderList.concat(response.data.items);
                    } else {
                        this.orderList = response.data.items;
                    }

                    this.isLoading = false;
                    this.isRefreshing = false;
                    this.isLoadMore = false;
                    this.loadMoreAble = response.data.items.length === 10;
                });
            },
            onCancel(order) {
                this.order = order;
                this.showCancel = true;
            },
            didCancel() {
                this.isLoading = true;
                this.fetchList();
            },
            onPay(order) {
                this.isLoading = true;
                this.fetchList();
            },
            onDelete(index) {
                this.orderList.splice(index, 1);
            },
            onConfirm() {
                this.isLoading = true;
                this.fetchList();
            },
            handleTabChange() {
                this.offset = 0;
                this.isLoading = true;
                this.fetchList();
            },
            onRefresh() {
                if (this.isLoading || this.isLoadMore) {
                    return;
                }

                this.offset = 0;
                //this.isRefreshing = true;
                setTimeout(this.fetchList, 1000);
            },
            onLoadMore() {
                if (this.isLoading || this.isRefreshing || this.isLoadMore || !this.loadMoreAble) {
                    return;
                }
                this.offset += 10;
                this.isLoadMore = true;
                this.fetchList();
            }
        }
    }
</script>

<style scoped>

</style>
